<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 获取短信验证码  -->
    <button>获取短信验证码</button>


    <script>
        // // 获取元素  
        // var btn = document.querySelector('button');

        // btn.onclick = function(){
        //     var count = 5;
        //     btn.innerText = `${count}s后重新获取`;
        //     var timer = setInterval(function(){
        //         count--;
        //         btn.innerText = `${count}s后重新获取`;
        //         if(count<=0){
        //             clearInterval(timer);
        //             btn.innerText = `获取短信验证码`;
        //         }
        //     },1000);

        // }


        // 上面 点一次开一个定时器  
        // 保证一次只能一个定时器   如果有定时器已经执行了 下个定时必须等着上一个结束了
        // 再开始  

        // 准备一个开关 
        var flag = true; // 默认开关是true 
        // 获取元素  
        var btn = document.querySelector('button');

        btn.onclick = function(){
            if(flag == false) return; // 点击首先开关是否是false 
            // 如果是false 说明 已经有定时器在执行  那么这个定时器不允许执行

            var count = 5;
            btn.innerText = `${count}s后重新获取`;
           
            flag = false;  // 走到这里说明定时器可执行 为了防止其它定时器执行
            // 将flag 变成false 
            var timer = setInterval(function(){
                count--;
                btn.innerText = `${count}s后重新获取`;
                if(count<=0){
                    clearInterval(timer);
                    btn.innerText = `获取短信验证码`;
                    flag = true;  // 定时器到这里处理完毕 //flag变成true 
                    //其它定时器可以执行了
                }
            },1000);

        }

    </script>
</body>
</html>